<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Core - Documentation</title>

    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-Camera.html">Camera</a><ul class='methods'><li data-type='method'><a href="module-Camera.html#.focusOnBounds">focusOnBounds</a></li><li data-type='method'><a href="module-Camera.html#.focusOnLocation">focusOnLocation</a></li><li data-type='method'><a href="module-Camera.html#.onCameraChange">onCameraChange</a></li><li data-type='method'><a href="module-Camera.html#.orbitTarget">orbitTarget</a></li><li data-type='method'><a href="module-Camera.html#.setCameraMode">setCameraMode</a></li></ul></li><li><a href="module-Controls.html">Controls</a><ul class='methods'><li data-type='method'><a href="module-Controls.html#.configureControls">configureControls</a></li></ul></li><li><a href="module-Core.html">Core</a><ul class='methods'><li data-type='method'><a href="module-Core.html#.datafileForLocation">datafileForLocation</a></li><li data-type='method'><a href="module-Core.html#.displayLocation">displayLocation</a></li><li data-type='method'><a href="module-Core.html#.init">init</a></li><li data-type='method'><a href="module-Core.html#.onBoundsFocused">onBoundsFocused</a></li><li data-type='method'><a href="module-Core.html#.onLocationError">onLocationError</a></li><li data-type='method'><a href="module-Core.html#.onLocationFocused">onLocationFocused</a></li><li data-type='method'><a href="module-Core.html#.onLocationLoaded">onLocationLoaded</a></li><li data-type='method'><a href="module-Core.html#.onUserInteraction">onUserInteraction</a></li><li data-type='method'><a href="module-Core.html#.setDisplayErrors">setDisplayErrors</a></li></ul></li><li><a href="module-Environment.html">Environment</a><ul class='methods'><li data-type='method'><a href="module-Environment.html#.environmentEditor">environmentEditor</a></li><li data-type='method'><a href="module-Environment.html#.setEnvironment">setEnvironment</a></li></ul></li><li><a href="module-Features.html">Features</a><ul class='methods'><li data-type='method'><a href="module-Features.html#.addBuiltinOverlay">addBuiltinOverlay</a></li><li data-type='method'><a href="module-Features.html#.addOverlay">addOverlay</a></li><li data-type='method'><a href="module-Features.html#.focusOnFeature">focusOnFeature</a></li><li data-type='method'><a href="module-Features.html#.highlightFeature">highlightFeature</a></li><li data-type='method'><a href="module-Features.html#.onFeatureClicked">onFeatureClicked</a></li><li data-type='method'><a href="module-Features.html#.onFeatureSelected">onFeatureSelected</a></li><li data-type='method'><a href="module-Features.html#.onOverlayAdded">onOverlayAdded</a></li><li data-type='method'><a href="module-Features.html#.removeOverlay">removeOverlay</a></li><li data-type='method'><a href="module-Features.html#.updateOverlay">updateOverlay</a></li></ul></li><li><a href="module-Location.html">Location</a><ul class='methods'><li data-type='method'><a href="module-Location.html#.setUserLocation">setUserLocation</a></li><li data-type='method'><a href="module-Location.html#.toggleUserLocationTracking">toggleUserLocationTracking</a></li></ul></li><li><a href="module-Rendering.html">Rendering</a><ul class='methods'><li data-type='method'><a href="module-Rendering.html#.pause">pause</a></li><li data-type='method'><a href="module-Rendering.html#.play">play</a></li></ul></li><li><a href="module-UI.html">UI</a><ul class='methods'><li data-type='method'><a href="module-UI.html#.setCameraModeControlVisible">setCameraModeControlVisible</a></li><li data-type='method'><a href="module-UI.html#.setCompassVisible">setCompassVisible</a></li><li data-type='method'><a href="module-UI.html#.setRotationControlVisible">setRotationControlVisible</a></li><li data-type='method'><a href="module-UI.html#.setUserLocationControlVisible">setUserLocationControlVisible</a></li><li data-type='method'><a href="module-UI.html#.setZoomControlVisible">setZoomControlVisible</a></li></ul></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">Core</h1>
    

    




<section>

<header>
    
        
            
        
    
</header>

<article>
    <div class="container-overview">
    
        
            <div class="description">The Procedural JavaScript library enables developers to embed
the Procedural engine into their web pages. To use this library
include a script tag on your page like so:
<pre>&lt;script
  src="https://unpkg.com/procedural-gl/build/procedural-gl.js"&gt;
&lt;/script&gt;
</pre>
This will create a <tt>Procedural</tt> object that your JavaScript code
will be able to call. Once you have loaded the Procedural library, you can load in a location and add the visualization to your page. A typical pattern of initialization is as follows:</div>
        

        
            




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>













    <h5>Example</h5>
    
    <pre class="prettyprint"><code>Procedural.init( {
  container: document.getElementById( 'app' ),
  // For further details see:
  // github.com/felixpalmer/procedural-gl-js/wiki/Data-sources
  datasource: {
    elevation: {
      apiKey: 'GET_AN_API_KEY_FROM_YOUR_ELEVATION_PROVIDER',
      pixelFormat: 'nasadem', // or 'terrain-rgb', 'terrarium'
      urlFormat: 'https://elevation.example.com/tiles/{z}/{x}/{y}.jpg?key={apiKey}',
    },
    imagery: {
      apiKey: 'GET_AN_API_KEY_FROM_YOUR_IMAGERY_PROVIDER',
      urlFormat: 'https://imagery.example.com/tiles/{z}/{x}/{y}.jpg?key={apiKey}',
      attribution: 'Imagery attribution'
    },
  }
} );
Procedural.displayLocation( { latitude: 47.25, longitude: 13.55 } );</code></pre>


















        
    
    </div>

    

    

    

     

    

    

    
        <h3 class="subsection-title">Methods</h3>

        
            

    

    <h4 class="name" id=".datafileForLocation"><span class="type-signature">(static) </span>datafileForLocation<span class="signature">(target)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Returns the file name for a data file for a given location. Used mostly internally by engine to construct URLs.
</div>











    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            

            <td class="description last">An Object specifying a longitude and latitude</td>
        </tr>

    
    </tbody>
</table>
















        
            

    

    <h4 class="name" id=".displayLocation"><span class="type-signature">(static) </span>displayLocation<span class="signature">(target)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Instructs engine to download necessary data files for a location and to display it.
When the data is ready to be displayed <a href="module-Core.html#.onLocationLoaded">onLocationLoaded</a> is fired.
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>var target = { latitude: 43.21, longitude: 6.133 };
Procedural.displayLocation( target );

// Optionally can also supply:
// - viewing angle,
// - a bearing,
// - a distance,
// - animation duration (in seconds)
var target = {
  latitude: 44.5, longitude: 6.3,
  angle: 20, bearing: 30, distance: 1000
  animationDuration: 0.5
};
Procedural.displayLocation( target );</code></pre>




    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            

            <td class="description last">An Object specifying a longitude and latitude</td>
        </tr>

    
    </tbody>
</table>
















        
            

    

    <h4 class="name" id=".init"><span class="type-signature">(static) </span>init<span class="signature">(container)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Appends a canvas element to the specified container where the
engine will draw its output.
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>var container = document.getElementById( 'app' );
Procedural.init( {
  container: document.getElementById( 'app' ),
  // For further details see:
  // github.com/felixpalmer/procedural-gl-js/wiki/Data-sources
  datasource: {
    elevation: {
      apiKey: 'GET_AN_API_KEY_FROM_YOUR_ELEVATION_PROVIDER',
      pixelFormat: 'nasadem', // or 'terrain-rgb', 'terrarium'
      urlFormat: 'https://elevation.example.com/tiles/{z}/{x}/{y}.jpg?key={apiKey}',
      attribution: 'Elevation attribution'
    },
    imagery: {
      apiKey: 'GET_AN_API_KEY_FROM_YOUR_IMAGERY_PROVIDER',
      urlFormat: 'https://imagery.example.com/tiles/{z}/{x}/{y}.jpg?key={apiKey}',
      attribution: 'Imagery attribution'
    },
  }
} );</code></pre>




    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>container</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLElement</span>


            
            </td>

            

            

            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>
















        
            

    

    <h4 class="name" id=".onBoundsFocused"><span class="type-signature">(static) </span>onBoundsFocused<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Callback function for when the transition for `focusOnBounds` completes
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>Procedural.onBoundsFocused = function () {
  Procedural.orbitTarget();
};</code></pre>


















        
            

    

    <h4 class="name" id=".onLocationError"><span class="type-signature">(static) </span>onLocationError<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Callback function for when location data failed to downloaded. This could be because the network request failed, or because the region is not available. See also <a href="module-Core.html#.setDisplayErrors">Core.setDisplayErrors</a>
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>Procedural.onLocationError = function ( message ) {
  // Handle error
  console.error( message );
};</code></pre>


















        
            

    

    <h4 class="name" id=".onLocationFocused"><span class="type-signature">(static) </span>onLocationFocused<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Callback function for when the transition for `focusOnLocation` completes
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>Procedural.onLocationFocused = function () {
  console.log( 'Location focused' );
};</code></pre>


















        
            

    

    <h4 class="name" id=".onLocationLoaded"><span class="type-signature">(static) </span>onLocationLoaded<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Callback function for when location data has been downloaded and displayed
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>Procedural.onLocationLoaded = function () {
  var container = document.getElementById( 'app' );
  Procedural.init( container );
};</code></pre>


















        
            

    

    <h4 class="name" id=".onUserInteraction"><span class="type-signature">(static) </span>onUserInteraction<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Callback function for when engine recieves input from the
user. Can be used to hide overlays when the user interacts with
the map
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>Procedural.onUserInteraction = function () {
  Procedural.removeOverlay( 'popup' );
}</code></pre>


















        
            

    

    <h4 class="name" id=".setDisplayErrors"><span class="type-signature">(static) </span>setDisplayErrors<span class="signature">(value)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Configure whether errors should be displayed to the user. See also <a href="module-Core.html#.onLocationError">Core.onLocationError</a>
</div>











    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
                
<span class="param-type">Boolean</span>


            
            </td>

            

            

            <td class="description last">pass true to show errors, false to only report via API</td>
        </tr>

    
    </tbody>
</table>
















        
    

    

    
</article>

</section>




</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>